@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #0f172a;
  --primary-foreground: #f8fafc;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #ef4444;
  --destructive-foreground: #f8fafc;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #0f172a;
  --radius: 0.5rem;

  /* FACET Primary Colors */
  --facet-blue-primary: #1A5A99;
  --facet-wine-primary: #9A2D4A;
  
  /* FACET Supporting Colors */
  --facet-blue-light: #5BA3E8;
  --facet-blue-medium: #1F6DB8;
  --facet-blue-dark: #1A5A96;
  --facet-teal: #0580B2;
  --facet-wine-light: #D63856;
  --facet-wine-medium: #B01E36;
  --facet-wine-dark: #940011;
  --facet-deep-wine: #73001C;
  --facet-navy: #132845;
  --facet-navy-light: #174875;
  
  /* FACET UI Colors (matching chat interface) */
  --facet-sidebar: #F5F4ED;
  --facet-chat-bg: #FAF9F5;
  --facet-white: #FFFFFF;
  --facet-send-button: #1886C0;
  
  /* FACET Feature Card Colors */
  --facet-card-blue: #A5C7E2;     /* AI Therapy Card */
  --facet-card-pink: #D4B6BA;     /* Crisis Support Card */
  --facet-card-green: #BCD1CA;    /* Progress Tracking Card */
  --facet-card-lavender: #CBCADB; /* Trust & Security Card */
  --facet-card-light: #E5E4EF;    /* Small feature icons */
  
  /* FACET Gradients */
  --facet-primary-gradient: linear-gradient(135deg, #2C84DB 0%, #C41E3A 100%);
  --facet-secondary-gradient: linear-gradient(135deg, #0580B2 0%, #940011 100%);
  --facet-text-gradient: linear-gradient(90deg, #2C84DB 0%, #C41E3A 100%);
  
  /* Legacy Claude colors for backward compatibility */
  --claude-orange: #D97757;
  --claude-sidebar: var(--facet-sidebar);
  --claude-chat-bg: var(--facet-chat-bg);
  --claude-white: var(--facet-white);
}

.dark {
  --background: #0f172a;
  --foreground: #f8fafc;
  --card: #0f172a;
  --card-foreground: #f8fafc;
  --popover: #0f172a;
  --popover-foreground: #f8fafc;
  --primary: #f8fafc;
  --primary-foreground: #0f172a;
  --secondary: #1e293b;
  --secondary-foreground: #f8fafc;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --accent: #1e293b;
  --accent-foreground: #f8fafc;
  --destructive: #7f1d1d;
  --destructive-foreground: #f8fafc;
  --border: #1e293b;
  --input: #1e293b;
  --ring: #d4d4d8;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "rlig" 1, "calt" 1;
}

/* FACET Brand Utility Classes */
.bg-facet-blue { background-color: var(--facet-blue-primary); }
.bg-facet-wine { background-color: var(--facet-wine-primary); }
.bg-facet-teal { background-color: var(--facet-teal); }
.bg-facet-navy { background-color: var(--facet-navy); }
.bg-facet-sidebar { background-color: var(--facet-sidebar); }
.bg-facet-chat { background-color: var(--facet-chat-bg); }
.bg-facet-white { background-color: var(--facet-white); }

/* Feature Card Colors */
.bg-facet-card-blue { background-color: var(--facet-card-blue); }
.bg-facet-card-pink { background-color: var(--facet-card-pink); }
.bg-facet-card-green { background-color: var(--facet-card-green); }
.bg-facet-card-lavender { background-color: var(--facet-card-lavender); }
.bg-facet-card-light { background-color: var(--facet-card-light); }

/* Text Colors */
.text-facet-blue { color: var(--facet-blue-primary); }
.text-facet-wine { color: var(--facet-wine-primary); }
.text-facet-teal { color: var(--facet-teal); }
.text-facet-navy { color: var(--facet-navy); }

/* Border Colors */
.border-facet-blue { border-color: var(--facet-blue-primary); }
.border-facet-wine { border-color: var(--facet-wine-primary); }
.border-facet-teal { border-color: var(--facet-teal); }

/* Gradients */
.bg-facet-gradient { background: var(--facet-primary-gradient); }
.bg-facet-secondary-gradient { background: var(--facet-secondary-gradient); }
.text-facet-gradient { 
  background: var(--facet-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hover States */
.hover\:bg-facet-blue:hover { background-color: var(--facet-blue-light); }
.hover\:bg-facet-wine:hover { background-color: var(--facet-wine-light); }
.hover\:bg-facet-teal:hover { background-color: var(--facet-blue-light); }

/* Global Hover Effects */
.facet-hover-fade {
  transition: opacity 0.2s ease-in-out;
}

.facet-hover-fade:hover {
  opacity: 0.8;
}

/* Legacy Claude classes */
.bg-claude-orange { background-color: var(--claude-orange); }
.bg-claude-sidebar { background-color: var(--claude-sidebar); }
.bg-claude-chat { background-color: var(--claude-chat-bg); }
.bg-claude-chat-bg { background-color: var(--claude-chat-bg); }
.bg-claude-white { background-color: var(--claude-white); }
.text-claude-orange { color: var(--claude-orange); }
.border-claude-orange { border-color: var(--claude-orange); }

/* FACET Component Styles */
.facet-container {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.facet-card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.facet-gradient {
  background: var(--facet-primary-gradient);
}

.facet-secondary-gradient {
  background: var(--facet-secondary-gradient);
}

.facet-title {
  font-family: var(--font-playfair), "Playfair Display", Georgia, "Times New Roman", serif;
  background: var(--facet-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.facet-title-zapfino {
  font-family: "Zapfino", "Brush Script MT", "Lucida Handwriting", cursive;
  background: var(--facet-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: visible;
  white-space: nowrap;
}

.facet-title-libre {
  font-family: var(--font-libre), "Libre Baskerville", Georgia, serif;
  background: var(--facet-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.anthropic-style {
  font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.claude-style-text {
  font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.meslo-font {
  font-family: "MesloLGS NF", "Menlo", "Monaco", "Courier New", monospace;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.facet-input {
  border: 1px solid #CBD5E1;
  outline: none;
  box-shadow: none;
}

.facet-input:focus {
  border-color: var(--facet-blue-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 132, 219, 0.1);
  ring: 0;
}

.claude-input {
  border: 1px solid #d1d5db;
  outline: none;
  box-shadow: none;
}

.claude-input:focus {
  border-color: #9ca3af;
  outline: none;
  box-shadow: none;
  ring: 0;
}